import React, { PureComponent } from 'react';

import styled from 'styled-components'
                      // div是一个函数 这里因为内部解析是按照标签模板字符串调用的，所以不能使用不同函数调用没意义( styled.div() )  
// 返回一个 react组件 
const HomeWrapper = styled.div`
  background-color: pink;
  color: red;

  /* 可以嵌套 */
  .banner {
    background-color: saddlebrown;

    span {
      color: #fff;
      margin: 0 20px;

      /* 是span元素并且带active类名 */
      &.active {
        color: #000;
      }

      /* 伪类 */
      &:hover {
        color: greenyellow;
      }
      
      /* 伪元素 */
      &::after {
        content: 'aaa';
      }

    }
  }
`
const H2Title = styled.h2`
  text-decoration: underline;
`

export default class Home extends PureComponent {
  render() {
    return (
      <HomeWrapper>
        {/* 如果觉得和别的地方 会产生层叠 可以使用这种形式 */}
        <H2Title>我是home的标题</H2Title>

        <div className="banner">
          <span>轮播图</span>
          <span>轮播图2</span>
          <span className="active">轮播图3</span>
          <span>轮播图4</span>
        </div>
        <hr />
      </HomeWrapper>
    )
  }
}
